<template>
	<div id="gallery">
		<router-view v-slot="{ Component }">
			<component v-if="Component" :is="Component"></component>
			
			<div v-else class="list">
				<div class="card" v-for="item in cardsList" :key="item.name" @click="cardClickHandle(item)">
					{{item.name}}
				</div>
			</div>
		</router-view>
	</div>
</template>

<script>
	
	import { defineComponent } from "vue";
	
	export default defineComponent({
		name: 'GalleryView'
	})
	
</script>

<script setup>

	import { useRouter } from 'vue-router';
	import cardsList from './modList';
	
	const router  = useRouter();
	
	function cardClickHandle(data) {
		router.push({ 
			name: 'galleryMod', 
			query: {
				name: data.name
			}
		})
	}

</script>

<style lang="scss" scoped>
	
	@import '@/theme/define/index.scss';
	
	#gallery {
		@include viewLayout;
		@include mediaSm {
			padding-top: 40px;
			padding-bottom: 40px;
		}
	}
	
	.list {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	
	.card {
		background: #fff;
		border-radius: 10px;
		box-shadow: 0 0 10px #e3e3e3;
		padding: 10px 20px;
		cursor: pointer;
	}
	
</style>